<!DOCTYPE html>
<html>
<head lang="kr">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>8.2 [Combo Chart] pie and donut</title>
    <link rel="stylesheet" type="text/css" href="../dist/tui-chart.css" />
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.css'/>
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.css'/>
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/theme/neo.css'/>
    <link rel='stylesheet' type='text/css' href='./css/example.css'/>
</head>
<body>
<div class='wrap'>
    <div class='code-html' id='code-html'>
        <div id='chart-area'></div>
    </div>
    <div class='custom-area'>
        <div id='error-dim'>
            <span id='error-text'></span>
            <div id='error-stack'></div>
            <span id='go-to-dev-tool'>For more detail, open browser's developer tool and check it out.</span>
        </div>
        <div class="try-it-area">
            <h3>try it</h3>
            <textarea id="code"></textarea>
            <div class="apply-btn-area">
                <button class="btn" onclick='evaluationCode(chartCM, codeString);'>Run it!</button>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='https://uicdn.toast.com/tui.chart/latest/raphael.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js'></script>
<script src='../dist/tui-chart.js'></script>
<script class='code-js' id='code-js'>
var container = document.getElementById('chart-area');
var data = {
    categories: ['Browser'],
    seriesAlias: {
        pie1: 'pie',
        pie2: 'pie'
    },
    series: {
        pie1: [
            {
                name: 'Chrome',
                data: 46.02
            },
            {
                name: 'IE',
                data: 20.47
            },
            {
                name: 'Firefox',
                data: 17.71
            },
            {
                name: 'Safari',
                data: 5.45
            },
            {
                name: 'Opera',
                data: 3.10
            },
            {
                name: 'Etc',
                data: 7.25
            }
        ],
        pie2: [
            {
                name: 'Chrome 1',
                data: 26.02
            },
            {
                name: 'Chrome 2',
                data: 20
            },
            {
                name: 'IE 1',
                data: 5.47
            },
            {
                name: 'IE1 2',
                data: 7
            }, {
                name: 'IE 3',
                data: 8
            },
            {
                name: 'Firefox 1',
                data: 7.71
            },
            {
                name: 'Firefox 2',
                data: 10
            },
            {
                name: 'Safari 1',
                data: 5.45
            },
            {
                name: 'Opera 1',
                data: 3.10
            },
            {
                name: 'Etc 1',
                data: 7.25
            }
        ]
    }
};
var options = {
    chart: {
        width: 700,
        height: 700,
        title: 'Usage share of web browsers'
    },
    series: {
        pie1: {
            radiusRange: ['57%'],
            labelAlign: 'center',
            showLegend: true
        },
        pie2: {
            radiusRange: ['70%', '100%'],
            labelAlign: 'outer',
            showLegend: true
        }
    },
    legend: {
        visible: false
    },
    tooltip: {
        suffix: '%'
    },
    theme: 'newTheme'
};

tui.chart.registerTheme('newTheme', {
    series: {
        pie1: {
            colors: ['#00a9ff', '#ffb840', '#ff5a46', '#00bd9f', '#785fff', '#f28b8c', '#989486', '#516f7d', '#29dbe3', '#dddddd'],
            label: {
                color: '#fff',
                fontFamily: 'sans-serif'
            }
        },
        pie2: {
            colors: [
                '#33baff', '#66ccff',
                '#ffc666', '#ffd48c', '#FFDB9F',
                '#ff7b6b', '#ff9c90',
                '#33cab2',
                '#937fff', '#f5a2a3'],
            label: {
                color: '#fff',
                fontFamily: 'sans-serif'
            }
        }
    }
});

tui.chart.comboChart(container, data, options);
</script>
<!--For tutorial page-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.js'></script>
<script src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/edit/matchbrackets.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/selection/active-line.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/javascript-lint.js'></script>
<script src='./js/example.js'></script>
</body>
</html>
